<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/logo.png" alt="" />
		
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="content">
			<div class="title">{{$i18n.locale == 'zh' ? info.cn_title: info.eu_title}}</div>
			<div v-if="info.cn_pdf != null && info.eu_pdf != null && info.cn_pdf != '' && info.eu_pdf != ''" class="m-pdf" style="width: 100%;height: 100vh;">
				<div id="pdf"></div>
			</div>
			<div v-else class="info" v-html="$i18n.locale == 'zh' ? info.cn_answer: info.eu_answer"></div>
		</div>
		<!-- <div class="cue">
			<div class="title">{{$t('language.nohelp')}}</div>
			<div class="text" @click="show = true">{{$t('language.Contact')}} ></div>
		</div>
		<div class="showTopic" v-if="show">
			<div>
				<img src="../assets/zh-lxkf_03.jpg" />
				<div>
					<img src="../assets/close_03.png" @click="show = false" />
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	import Pdfh5 from 'pdfh5'
	import 'pdfh5/css/pdfh5.css'
	import {
		getHelpDetails,
	} from '@/api/user';
	export default {
		name: 'Details',
		data: function() {
			return {
				info: '',
				id: '',
				show: false
			}
		},
		created() {
			const {
				query
			} = this.$route;
			this.query = query
			this.id = query.id
			this.getList(query.id)
		},
		mounted() {},
		methods: {
			getList(id) {
				getHelpDetails({
					id
				}).then((res) => {
					const _this = this
					let _info = res.data
					_this.info = _info
					_this.getPdfh5()
				}).catch((err) => {
					console.log(err)
				})
			},
			getPdfh5() {
				const _this = this
				if(_this.info.cn_pdf != null && _this.info.eu_pdf != null && _this.info.cn_pdf != '' && _this.info.eu_pdf != '') {
					let timer = setTimeout(()=>{
						clearTimeout(timer)
						timer = null
						_this.pdfh5 = new Pdfh5('#pdf', {
							pdfurl: _this.$i18n.locale == 'zh' ? _this.info.cn_pdf : _this.info.eu_pdf,
							goto: 1
						})
						// // 监听pdf准备开始渲染，此时可以拿到pdf总页数
						// _this.pdfh5.on('ready', function() {
						// 	// console.log('总页数:' + this.totalNum)
						// })
						// // 监听pdf加载完成事件，加载失败、渲染成功都会触发
						// _this.pdfh5.on('complete', (status, msg, time) => {
						// 	console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
						// })
					}, 100)
				}
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
				this.getPdfh5()
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #fff;
	}

	.content {
		margin: 0 30px;
		.title {
			margin-top: 50px;
			margin-bottom: 50px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 36px;
			color: #060143;
		}
		.info {
			font-size: 24px;
			line-height: 48px;
		}
	}

	.cue {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 266px;
		margin: 182px 30px 0;
		text-align: center;
		font-size: 28px;
		color: #666;
		border-radius: 15px;
		background-color: #f5f5f5;

		.text {
			margin-top: 16px;
			color: #ef5948;
		}
	}

	.showTopic {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		position: absolute;
		left: 0;
		top: 0;
	}

	.showTopic>div>img {
		width: 560px;
		display: block;
	}

	.showTopic>div>div {
		margin-top: 30px;
		text-align: center;
	}

	.showTopic>div>div>img {
		width: 58px;
		height: 58px;
	}
</style>